<template>
  <div class="rank-detail">
    <MusicList
      :music-list="songList"
      object-key="RANK_DETAIL"
      number-visible
    ></MusicList>
  </div>
</template>

<script>
import { ref } from 'vue'
import MusicList from '@/components/MusicList/MusicList'
import useRankDetailApi from './useRankDetailApi'
export default {
  name: 'RankDetail',
  components: {
    MusicList
  },
  setup() {
    const songList = ref([])
    useRankDetailApi(songList)
    return {
      songList
    }
  }
}
</script>

<style lang="scss" scoped>
.rank-detail {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  background: #fff;
}
</style>
